<template>
  <div class="aside-number-container">
    <span class="text" v-for="(item, i) in data" :key="i">
      {{ item.text }} : {{ item.number }}</span
    >
  </div>
</template>

<script>
export default {
  props: {
    data: {
      required: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.aside-number-container {
  display: inline-block;
  font-size: 12px;
  --height: 23px;
  line-height: var(--height);
  height: var(--height);
  width: fit-content;
  border-radius: calc(var(--height) / 2);
  background: #ecf3fe;
  $text-color: #3869d2;
  color: $text-color;
  white-space: nowrap;
  overflow: hidden;
  span {
    position: relative;
    display: inline-block;
    // height: 12px;
    padding: 0 1em;
    // border-right: 1px solid $text-color;
    &:after {
      content: "|";
      position: absolute;
      right: 0;
    }
    &:last-child:after {
      content: "";
    }
  }
}
</style>
